import { Chartdata, getAiList, StudyInfoItemType } from '@/api/AiStatisticApi';
import { useSize } from 'ahooks';
import * as echarts from 'echarts';
import { useEffect, useRef, useState } from 'react';
import OStyle from '../index.less';
import { NoListDom } from '../NoListDom';
let myChart: echarts.ECharts;
const OpenStudyList: React.FC<any> = () => {
  const chartDom = useRef<HTMLDivElement>(null);
  const size = useSize(chartDom.current);
  const [AiList, setAiList] = useState<StudyInfoItemType[]>([]);
  const [activeKey, setActive] = useState<number>(0);
  const [chartDataList, setChartdata] = useState<Chartdata[]>([]);
  /**
   * 获取ai学习列表 已开启的
   */
  const initAiList = async () => {
    const list = await getAiList();
    setAiList([...list]);
    if (list.length) {
      setChartdata([...list[0].studyInfoVoList]);
    }
  };
  //初始化图表
  useEffect(() => {
    if (!chartDom.current) return;
    myChart = chartDom.current && echarts.init(chartDom.current);
    const xAxisData: string[] = []; //横坐标
    const noStudyPersonNum: number[] = []; //未学
    const studyPersonNum: number[] = []; //已学
    chartDataList.forEach((e) => {
      xAxisData.push(e.createTime);
      noStudyPersonNum.push(e.noStudyPersonNum);
      studyPersonNum.push(e.studyPersonNum);
    });
    const option = {
      tooltip: {
        formatter: function (params: { dataIndex: number }) {
          const tipTxt =
            '已学人数:' + studyPersonNum[params.dataIndex] + '</br>' + '未学人数:' + noStudyPersonNum[params.dataIndex];
          return tipTxt;
        },
      },
      legend: {
        right: '24px',
        top: '24px',
        data: ['已学', '未学'],
      },
      color: ['#3BD59A', '#FF4A4A'],
      xAxis: {
        data: xAxisData,
        axisLabel: {
          rotate: 30, //文字旋转
        },
        axisLine: {
          lineStyle: {
            color: '#999', //x轴的颜色
            width: 1, // 轴线的宽度
          },
        },
      },
      yAxis: {
        axisLine: {
          lineStyle: {
            color: '#999',
            width: 1,
          },
        },
      },
      grid: {
        left: '80px',
        right: '80px',
        top: 70,
        bottom: 75,
      },
      series: [
        {
          name: '已学',
          type: 'line',
          smooth: false, //是否平滑
          data: studyPersonNum,
        },
        {
          name: '未学',
          type: 'line',
          smooth: false,
          data: noStudyPersonNum,
        },
      ],
    };
    myChart.setOption(option);
    const resize = () => {
      if (myChart) {
        myChart.resize();
      }
    };
    window.addEventListener('resize', resize);
    return () => {
      if (myChart) {
        echarts.dispose(myChart);
      }
      window.removeEventListener('resize', resize);
    };
  }, [chartDataList, size]);
  useEffect(() => {
    initAiList();
  }, []);
  return (
    <div className={OStyle.topMian}>
      <div className={OStyle.headT}>
        <div className={OStyle.head_tit}>AI学习</div>
      </div>
      <div className={OStyle.topContent}>
        <div style={{ borderRight: '1px solid #eceef2' }}>
          <div className={OStyle.study_list}>
            {AiList.length ? (
              AiList.map((item: StudyInfoItemType, index) => {
                return (
                  <div
                    className={`${activeKey == index ? OStyle.study_li_active : undefined} ${OStyle.study_li}`}
                    key={index}
                    onClick={() => {
                      setActive(index);
                      setChartdata([...item.studyInfoVoList]);
                    }}
                  >
                    <div className={OStyle.study_li_name} title={item.title}>
                      【AI学习】{item.title}
                    </div>
                  </div>
                );
              })
            ) : (
              <NoListDom></NoListDom>
            )}
          </div>
        </div>

        <div id="Chart" ref={chartDom} style={{ flexGrow: 1, height: '411px' }}></div>
        {!chartDataList.length ? (
          <div className={OStyle.nochartdata}>
            <div className="nodatachild">暂无数据</div>
          </div>
        ) : null}
      </div>
    </div>
  );
};

export default OpenStudyList;
